<template>
  <div class="appStore-main">
    <div class="search-container">
      <div class="search-box">
        <i class="el-icon-search"></i>
        <input type="text" placeholder="搜索应用..." v-model="searchQuery" />
      </div>
      <el-button type="primary" @click="showAddDialog" class="add-button">
        <el-icon><Plus /></el-icon>
        新增Agent
      </el-button>
    </div>
    <div class="app-grid">
      <div v-for="(app, index) in filteredApps" :key="index" class="app-card">
        <div class="app-content">
          <div class="app-icon">
            <img :src="app.appIconImg" :alt="app.appName" />
          </div>
          <div class="app-name">{{ app.appName }}</div>
        </div>
        <div class="overlay">
          <h3 class="overlay-title">{{ app.appName }}</h3>
          <p class="overlay-description">{{ app.appDescr }}</p>
          <button class="add-button" @click="addToMyApps(app)" :disabled="app.installStatus">
            <i class="el-icon-plus"></i> {{ app.installStatus ? '已安装' : '安装' }}
          </button>
        </div>
      </div>
    </div>
    <AddAgentDialog v-model="dialogVisible" @submit="handleAddAgent" />
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import appList from './appList'
import AddAgentDialog from '@/components/AddAgentDialog/index.vue'

export default {
  name: 'index',
  components: {
    AddAgentDialog,
    Plus
  },
  data() {
    return {
      searchQuery: '',
      appList: (appList || []).map((app) => ({
        ...app,
        appName: app.appName || '',
        installStatus: false
      })),
      dialogVisible: false
    }
  },
  computed: {
    filteredApps() {
      return this.appList
        .filter((app) => app.appName && app.appName.toLowerCase().includes(this.searchQuery.toLowerCase()))
        .sort((a, b) => Number(a.installStatus) - Number(b.installStatus))
    }
  },
  methods: {
    showAddDialog() {
      this.dialogVisible = true
    },
    handleAddAgent(agentData) {
      // 从本地存储获取现有的自定义Agent列表
      const customAgents = JSON.parse(localStorage.getItem('customAgents') || '[]')
      // 添加新的Agent
      customAgents.push(agentData)
      // 保存到本地存储
      localStorage.setItem('customAgents', JSON.stringify(customAgents))
      // 刷新应用列表
      agentData.installStatus = false
      this.appList.push(agentData)
      ElMessage.success('添加成功！')
    },
    addToMyApps(app) {
      try {
        // 获取现有的应用列表
        let myApps = localStorage.getItem('myApps')
        myApps = myApps ? JSON.parse(myApps) : []

        // 检查是否已经添加过
        if (app.installStatus) {
          ElMessage.warning('该应用已在我的应用列表中')
          return
        }

        // 添加新应用并更新安装状态
        myApps.push(app)
        app.installStatus = true
        localStorage.setItem('myApps', JSON.stringify(myApps))

        ElMessage.success(`${app.appName}已添加到我的应用`)
      } catch (error) {
        console.error('添加应用失败:', error)
        ElMessage.error('添加失败，请重试')
      }
    }
  }
}
</script>

<style scoped>
.appStore-main {
  padding: 20px;
}

.search-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-box {
  display: flex;
  align-items: center;
  background: #f5f7fa;
  border-radius: 4px;
  padding: 8px 12px;
  flex: 1;
  margin-right: 16px;
}

.search-box i {
  color: #909399;
  margin-right: 8px;
}

.search-box input {
  border: none;
  background: none;
  outline: none;
  width: 100%;
  font-size: 14px;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 12px;
}

.app-card {
  background: white;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  cursor: pointer;
  height: 130px;
}

.app-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.app-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.app-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 12px;
}

.app-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.app-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(119, 170, 241, 0.95);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.3s ease;
}

.app-card:hover .overlay {
  opacity: 1;
  transform: translateY(0);
}

.overlay-title {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px;
}

.overlay-description {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 20px;
  text-align: center;
}

.add-button {
  background: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.add-button:hover {
  background: #66b1ff;
}

.add-button:disabled {
  background: #a0cfff;
  cursor: not-allowed;
}
</style>
